{% set variant = item.variant %}
{% set product = variant.product %}

<div class="d-flex align-items-center gap-4">
    <div class="flex-shrink-0 align-self-start align-self-md-auto" style="width: 6rem;">
        <div class="overflow-auto bg-light rounded-3" style="aspect-ratio: 3/4; ">
            {{ component('sylius_shop:main_image', {
                product: variant.hasImages ? variant : product,
                class: "w-100 h-100 object-fit-cover",
                filter: 'sylius_shop_product_small_thumbnail'
            }) }}
        </div>
    </div>
    <div>
        <div class="h6">
            <a class="link-reset text-break" href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}" {{ sylius_test_html_attribute('product-name', item.productName) }}>
                {{ item.productName }}
            </a>
        </div>

        <small class="text-body-tertiary" {{ sylius_test_html_attribute('product-variant-code', variant.code) }}>{{ variant.code }}</small>

        {% if product.hasOptions() %}
            <div {{ sylius_test_html_attribute('product-options') }}>
                {% for optionValue in variant.optionValues %}
                    <small class="text-body-tertiary" {{ sylius_test_html_attribute('option-name', optionValue.name) }}>
                        {{ optionValue.name }}: <span {{ sylius_test_html_attribute('option-value') }}>{{ optionValue.value }}</span>
                    </small>
                {% endfor %}
            </div>
        {% elseif item.variantName is not null %}
            <small class="text-body-tertiary" {{ sylius_test_html_attribute('product-variant-name') }}>
                {{ item.variantName }}
            </small>
        {% endif %}
    </div>
</div>
